<template>
  <div class="blogs">
    <div class="content-header">
      <h1>用户管理<small>查看用户</small></h1>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item >后台管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>查看用户</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!--中间内容-->
    <div class="app-container">
		<div class="box">
			<el-table
				:data="tableData"
				style="width: 80%">
				<el-table-column
				  label="登录账号"
				  prop="id">
				</el-table-column>
				<el-table-column
				  label="昵称"
				  prop="nick_name">
				</el-table-column>
				<el-table-column
				  label="电子邮箱"
				  prop="email">
				</el-table-column>
				<el-table-column
				  label="权限"
				  prop="power">
				</el-table-column>
				<el-table-column
				  align="right">
<!-- 				  <template slot="header" slot-scope="scope">
					<el-input
					  v-model="search"
					  size="mini"
					  placeholder="搜索用户"/>
				  </template> -->
				  <template slot-scope="scope">
<!-- 					<el-button
					  size="mini"
					  @click="handleEdit(scope.$index, scope.row)">修改</el-button> -->
					<el-button
					  size="mini"
					  type="danger"
					  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				  </template>
				</el-table-column>
			</el-table>
			
			<el-pagination
			  background
			  layout="prev, pager, next"
			  :page-size="Pagesize"
			  :total="total"
			  @current-change="page">
			</el-pagination>
		</div>
    </div>
    <br>
    <br>
  </div>
</template>

<script>
	export default {
	  data() {
	    return {
	      tableData: [{
	        id:'',
			nick_name:'',
			email:'',
			power:null
	      }],
	      search: '',
			//total数据库中的所有数据量，Pagesize每页的数据量
			Pagesize:5,
			total:null,
			//删除后用于进行界面刷新！！！！
			currentPage:1
	    }
	  },
	  created() {
		var that=this
		//初始化加载第一页的数据  120.26.196.115  localhost
		axios.get("http://"+that.$store.state.host+":8181/user/findAll/"+1+"/"+that.Pagesize).then(function(res){
			console.log(res.data)
			that.tableData=res.data.map.data
			that.total=res.data.map.totalElements
		})	  	
	  },
	  methods:{
		  //修改按钮
		 //  handleEdit(index, row) {
		 //    // console.log(index, row);
			
		 //  },
		  //删除按钮
		  handleDelete(index, row) {
			//打印的序号  
			// console.log(index)
			//打印的用户信息  row.id
			// console.log(row)
			var that=this
			var user=JSON.parse(sessionStorage.getItem("user_info"))
			if(user.id==row.id){
				that.$message.error("你不能删除自己哟!!!");
			}else{
				//判断用户是否具有权限！！！！
				if(user.power==2){
					//进行删除操作前的再次询问！！！
					this.$confirm('此操作将永久删除 '+row.id+' , 是否继续?', '提示', {
					  confirmButtonText: '确定',
					  cancelButtonText: '取消',
					  type: 'warning'
					}).then(() => {
						//用户点击了确认删除
					    console.log("确认")
						//120.26.196.115  localhost
						axios.delete("http://"+that.$store.state.host+":8181/user/deleteUser/"+row.id).then(function(res){
							//刷新当前界面
							that.page(that.currentPage);
							that.$message.success(res.data.message);
						}) 
					}).catch(() => {
						//用户点击了取消 
						// console.log("取消")	   
					});
				}else{
					that.$message.warning('你不具有该权限!');
				}
			}
		  },
		  //分页查询
		  page(currentPage){
			var that=this
			//为了删除后用于界面刷新，所以保存一下！！！
			that.currentPage=currentPage
			// console.log(currentPage)
			//初始化加载第一页的数据  120.26.196.115  localhost
			axios.get("http://"+that.$store.state.host+":8181/user/findAll/"+currentPage+"/"+that.Pagesize).then(function(res){
				// console.log(res.data)
				that.tableData=res.data.map.data
			})	
		  }		
	  }
	}
</script>

<style>
</style>
